<!-- 消费机不使用该首页，请前往 ./home.vue -->

<template>
  <view v-if="pageStatus.loading" style="z-index: 99999; position: fixed">
    <u-loading-page :loading="pageStatus.loading"> </u-loading-page>
  </view>
  <view class="home-view">
    <tabbarHome v-if="nowHeader == 'universalHomeTabbar'" ref="universalHomeTabbar" />
    <tabbarMsg v-if="nowHeader == 'universalMsgTabbar'" ref="universalMsgTabbar" />
    <tabbarDataShow v-if="nowHeader == 'universalDataShowTabbar'" ref="universalDataShowTabbar" />
    <tabbarFunc v-if="nowHeader == 'universalFuncTabbar'" ref="universalFuncTabbar" />
    <tabbarUser v-if="nowHeader == 'universalUserTabbar'" ref="universalUserTabbar" />
    <common-tabbar @changeTab="changeTab" :pageData="tabbar" :nowHeader="nowHeader"></common-tabbar>
  </view>
</template>
<!-- <script > -->
<script lang="ts" setup>
import { getRolseConfig } from "@/king-components/js/App.js";

import { ref, nextTick, reactive, getCurrentInstance } from "vue";
import { onShow, onLoad, onUnload, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";

// tabbar 页面组件（将tabar当成组件使用，注意被当成组件的无法使用页面级生命周期，解决方案参考 onChoose ）
// 所有角色用到的 tabbar 都需要在此处先注册，再根据 nowHeader 动态显隐
import tabbarHome from "../tabbars/home";
import tabbarMsg from "../tabbars/msg";
import tabbarDataShow from "../tabbars/data-show";
import tabbarFunc from "../tabbars/func";
import tabbarUser from "../tabbars/user";

import init from "@/common/init/homeInit";

import { useStore } from "vuex";
const store = useStore();
const { proxy } = getCurrentInstance();

// 页面状态
const pageStatus = reactive({
  loading: true, // 页面加载状态
});

const nowHeader = ref("universalWorkbenchTabbar");
const tabbar = reactive([]);
const customNavigation = ref(false);
const title = ref("首页");

let windowHeight = 500;
let fixSysNavigation = true;
let placeholder = true;
onLoad(async () => {
  uni.getSystemInfo({
    success: (res) => {
      windowHeight = res.windowHeight + 10;
      // #ifdef MP-WEIXIN
      const platform = res.platform; //获取当前客户端平台
      const isWindows = platform === "windows"; //判断当前是不是windows系统
      if (isWindows) {
        /** 微信小程序的weindow版本存在双导航条的问题  */
        fixSysNavigation = false;
        placeholder = false;
        store.commit("initScreenNavbarInfo", { statusHeight: 0, navHeight: 0 });
      }
      // #endif
    },
  });

  loadList();

  // 监听页面显示事件，在页面显示时注册返回事件监听
  uni.$on("backToHome", (e) => onChoose("backToHome"));

  //====== 初始化工作 ================
  // 初始化字典 (暂不使用，未解决异步获取并更新到视图的问题)
  // initDict({
  // 	/** 设置字典项的取值字段名称 */
  // 	DICT_LABEL: 'dictLabel',
  // 	DICT_KEY: 'dictValue'
  // });

  // 其他初始化逻辑
  init.onLoad();
  pageStatus.loading = false;
  // ----------------------------------
});
// 在页面卸载时取消返回事件监听
onUnload(() => {
  uni.$off("backToHome");
});
onShow(async () => {
  onChoose("show");
});
onPullDownRefresh(async () => {
  onChoose("refresh");
});
onReachBottom(async () => {
  onChoose("reachBottom");
});

// 页面加载事件
const loadList = () => {
  // console.log('!store.getters.isLogin', !store.getters.isLogin)
  if (!store.getters.isLogin) return store.dispatch("user/logout", { isReLaunch: true });
  // 如果未选择角色，则跳转到选择角色页面
  // if (!store.getters.roleInfo?.roleAlias) return uni.navigateTo({ url: "/pages/subSetting/switchRole/index" });
  const config = getRolseConfig(store.getters.roleInfo?.roleAlias);
  // console.log("config", { config, roleInfo: store.getters.roleInfo });
  if (!config) {
    uni.showModal({
      title: "提示",
      content: "对不起，您无权登录该系统！",
      showCancel: false,
      complete: () => {
        store.dispatch("user/logout", { isReLaunch: true });
      },
    });
    return;
  }
  const isWhetherTabbar = config.tabbar.find((item) => item.whether) || config.tabbar[2];

  tabbar.splice(0, tabbar.length, ...config.tabbar);
  // 默认选中
  isWhetherTabbar.whether = true;
  nowHeader.value = isWhetherTabbar.pagePathName;
  customNavigation.value = isWhetherTabbar.customNavigation || false;
  title.value = isWhetherTabbar.text;
  uni.setNavigationBarTitle({
    title: isWhetherTabbar.text,
  });
  onChoose("loadList");
};

// tabbar选择切换事件
const onChoose = (type: string) => {
  if (type === "changeTab") {
    uni.pageScrollTo({
      scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0
      duration: 0, // 滚动动画的时长
    });
  }

  nextTick(() => {
    const currRef = proxy.$refs[nowHeader];
    // 处理页面的加载列表方法或下拉刷新方法
    const loadListFunc = currRef?.loadList;
    const enableLoadList = currRef?.enableLoadListInIndexPage;
    const onPullDownRefreshFunc = currRef?.onPullDownRefreshHook;
    const onShowFunc = currRef?.onShowHook;
    const reachBottomFunc = currRef?.onReachBottomHook;
    const onBackPressInHomeFunc = currRef?.onBackPressInHomeHook;
    if (loadListFunc && type === "loadList" && enableLoadList === true) return loadListFunc();
    if (loadListFunc && type === "changeTab") return loadListFunc();
    if (onPullDownRefreshFunc && type === "refresh") return onPullDownRefreshFunc();
    if (onShowFunc && type === "show") return onShowFunc();
    if (onBackPressInHomeFunc && type === "backToHome") return onBackPressInHomeFunc();
    if (reachBottomFunc && type === "reachBottom") return reachBottomFunc();
    // 组件没配置钩子方法时直接停止下拉刷新动画
    if (type === "refresh") uni.stopPullDownRefresh();
  });
};

const changeTab = (val: any) => {
  nowHeader.value = val.pagePathName;
  customNavigation.value = val.customNavigation || false;
  title.value = val.text;
  uni.setNavigationBarTitle({
    title: val.text,
  });
  onChoose("changeTab");
};
</script>
<style lang="scss">
.home-view {
  min-height: 100vh;
  /* tabbar 遮挡高度 */
  padding-bottom: 300rpx;
}
</style>
